<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid black;
        width: 500px;
        border-collapse: collapse;
      }
      th,
      td {
        border: 1px solid black;
        text-align: center;
      }
      * {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div>
      <button id="btn">添加一条新的访客信息</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>序列号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var info = [
        {
          name: "胡杭",
          age: 16,
        },
        {
          name: "胜明",
          age: 22,
        },
        {
          name: "军毅",
          age: 21,
        },
        {
          name: "晓华",
          age: 13,
        },
        {
          name: "盛聪",
          age: 23,
        },
        {
          name: "侦剑",
          age: 32,
        },
        {
          name: "红翔",
          age: 25,
        },
        {
          name: "超维",
          age: 18,
        },
        {
          name: "士琪",
          age: 22,
        },
        {
          name: "艳华",
          age: 20,
        },
      ];
      let btn = document.querySelector("#btn"); // 获取按钮  点击一次出现4个td
      let tbody = document.querySelector("tbody");
      let a = 0;
      let n = 1;
      btn.onclick = function () {
        while (a < info.length) {
          //tr
          let tr = document.createElement("tr");
          tbody.appendChild(tr);

          //td
          let td = document.createElement("td");
          tr.appendChild(td);
          // trl = document.getElementsByTagName('tr')
          td.innerHTML = n;
          for (let k in info[a]) {
            let td = document.createElement("td");
            tr.appendChild(td);
            td.innerHTML = info[a][k];
          }
          let td2 = document.createElement("td");
          tr.appendChild(td2);
          td2.innerHTML = '<a href="#">删除</a>';
          break;
        }

        let as = document.querySelectorAll("a");
        // console.log(as);
        for (let i = 0; i < as.length; i++) {
          as[i].onclick = function () {
            tbody.removeChild(this.parentNode.parentNode);
          };
        }
        a++;
        n++;
      };

      //   let td = th.nextElementSibling;
      //   console.log(th);

      //   btn.onclick = function () {
      //     for (let key in info) {
      //     //   let th = document.getElementsByTagName("table");
      //         console.log(key,info[key]);

      //     //   let i = 0;
      //     //   if (i < info.length){
      //     //     console.log(++key,info[key]);
      //     //     i++;
      //     //   }
      //         // console.log(info[key]);   .outerHTML = '<tr><td></td></tr>';
      //         // console.log(info[key].name);
      //         // let td = document.createElement("td");
      //         // td.firstElementChild.outerHTML = "<td>" + info[key] + "</td>";
      //         // th.insertBefore(td, th.children[i + 1]);

      //     }
      //     // let newLi = document.createElement("tr");
      //     // th.insertBefore(newLi,th.children[i+1]);
      //   };
    </script>
  </body>
</html>
